<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <div class="contentsize">房产信息统计</div>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <div style="width: 100%; overflow-x: auto">
                    <el-button type="primary" @click="downloadlist" icon="el-icon-download" class="searchcolor" style="margin-bottom: 10px;">导出</el-button>
                    <table width="100%" border="1" cellspacing="1" cellpadding="4" id="xqtableExcel7" align="center" class="table-2">
                        <tr style="font-weight: 700; color: #000000">
                            <td colspan="13" style="font-size: 20px">天津市行政事业单位房产信息统计表</td>
                        </tr>
                        <tr>
                            <td style="width: 12%" colspan="2">单位如果无房产需说明情况：</td>
                            <td style="width: 32%" colspan="4"></td>
                            <td style="width: 50%" colspan="7"></td>
                        </tr>
                        <tr>
                            <td style="width: 4%" rowspan="3">行次</td>
                            <td colspan="7">房产情况</td>
                            <td colspan="5">现出租(出借)房产情况</td>
                        </tr>
                        <tr>
                            <td colspan="1" rowspan="2" style="width: 8%">房产类型</td>
                            <td colspan="1" rowspan="2">房产证号</td>
                            <td colspan="1" rowspan="2">建筑面积</td>
                            <td colspan="1" rowspan="2">账面原值</td>
                            <td colspan="1" rowspan="2">房产地址</td>
                            <td colspan="1" rowspan="2" style="width: 6%">目前状态</td>
                            <td colspan="1" style="width: 8%" rowspan="2">租用人姓名</td>
                            <td colspan="1" style="width: 8%" rowspan="2">出租(出借)面积（实际出租面积）</td>
                            <td colspan="2">租(借)期</td>
                            <!-- <td colspan="1">租(借)期止</td> -->
                            <td colspan="1" style="width: 4%" rowspan="2">上年度租金收入</td>
                            <td colspan="1" style="width: 4%" rowspan="2">本年度预计租金收入</td>
                        </tr>
                        <tr>
                            <td colspan="1" style="width: 8%">起</td>
                            <td colspan="1" style="width: 8%">止</td>
                        </tr>
                        <tr>
                            <td colspan="1">栏次</td>
                            <td colspan="1">1</td>
                            <td colspan="1">4</td>
                            <td colspan="1">5</td>
                            <td colspan="1">6</td>
                            <td colspan="1">7</td>
                            <td colspan="1">9</td>
                            <td colspan="1"></td>
                            <td colspan="1">12</td>
                            <td colspan="1">13</td>
                            <td colspan="1">14</td>
                            <td colspan="1">15</td>
                            <td colspan="1">16</td>
                        </tr>
                        <template>
                            <tr v-for="(item, index) in fcxxlists" :key="index">
                                <td colspan="1">{{ index + 1 }}</td>
                                <td colspan="1">{{ item.cb ? item.cb : '— —' }}</td>
                                <td colspan="1">{{ item.zsbh ? item.zsbh : '— —' }}</td>
                                <td colspan="1">{{ item.jzmj }}</td>
                                <td colspan="1">{{ item.yz }}</td>
                                <td colspan="1">{{ item.fwdz ? item.fwdz : '— —' }}</td>
                                <td colspan="1">{{ item.jyzt ? item.jyzt : '— —' }}</td>
                                <td colspan="1">{{ item.czr ? item.czr : '— —' }}</td>
                                <td colspan="1">{{ item.czmj }}</td>
                                <td colspan="1">{{ item.zlqssj ? item.zlqssj.split(' ')[0] : '— —' }}</td>
                                <td colspan="1">{{ item.htdqsj ? item.htdqsj.split(' ')[0] : '— —' }}</td>
                                <td colspan="1">{{ item.sndzjsr }}</td>
                                <td colspan="1">{{ item.yjsr }}</td>
                            </tr>
                        </template>
                        <tr>
                            <td colspan="1">合计</td>
                            <td colspan="1">— —</td>
                            <td colspan="1">— —</td>
                            <td colspan="1">{{ jzmjSum }}</td>
                            <td colspan="1">— —</td>
                            <td colspan="1">— —</td>
                            <td colspan="1">— —</td>
                            <td colspan="1">— —</td>
                            <td colspan="1">{{ czmjSum }}</td>
                            <td colspan="1">— —</td>
                            <td colspan="1">— —</td>
                            <td colspan="1">{{ sndzjsrSum }}</td>
                            <td colspan="1">{{yjsrSum}}</td>
                        </tr>
                        <tr>
                            <td colspan="13">注：1.价值单位统一为“元”，保留小数点后两位；2.每项独立核算房产单独列一条信息。</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { fcxxlist,exportfcxxtj } from '@/api/index';
import valueList from '@/components/common/valueList.vue';
export default {
    name: 'dalist',
    data() {
        return {
            fcxxlists: [],
            fcxxform:{
                pageSize:100000
            },
            jzmjSum:0,
            czmjSum:0,
            sndzjsrSum:0,
            yjsrSum:0
        };
    },
    components: {},
    computed: {},
    methods: {
        fcxxlist(data) {
            fcxxlist(data).then((res) => {
                console.log(res);
                this.fcxxlists = res.data.records;
                this.getSum(this.fcxxlists,'jzmj','jzmjSum')
                this.getSum(this.fcxxlists,'czmj','czmjSum')
                this.getSum(this.fcxxlists,'sndzjsr','sndzjsrSum')
                this.getSum(this.fcxxlists,'yjsr','yjsrSum')
                console.log(this.jzmjSum)
            });
        },
        getSum(array, valName,sumName) {
            let b=array.reduce((acc, cur) => {
                return acc +Number(cur[valName]);
            }, 0);
            this[sumName]=b.toFixed(2)
        },
        // 导出列表
        downloadlist() {
            exportfcxxtj(this.fcxxform).then(res => {
                console.log(res)
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: 'application/vnd.ms-excel'
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = '房产信息导出文件';
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res)
            })
        },
    },
    mounted() {
        let data = {pageSize:100000};
        this.fcxxlist(data);
    }
};
</script>
<style>
</style>
<style scoped>
.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
}

.handle-box {
    overflow: hidden;
}
.container {
    /* height: calc(100vh - 260px); */
    overflow: hidden;
}
table {
    width: 100%;
    margin: auto;
    text-align: center;
}
.table-2 {
    border: 1px solid #c0c0c0;
    /* border-bottom: none; */
    border-collapse: collapse;
}
.table-2 tr,
.table-2 td {
    font-size: 14px;
    border-collapse: collapse;
    border: 1px solid #c0c0c0;
    border-bottom: none;
    padding: 6px;
    box-sizing: border-box;
}
.titfont {
    width: 7%;
}
.titfont1 {
    width: 14%;
}
</style>
